<template>
  <div class="header">
    <el-input
      style="width: 300px"
      v-model="chineseId"
      placeholder="请输入身份证号"
    ></el-input>
    <el-button @click="chineseId = idCard.makeID()">随机生成</el-button>
  </div>
  <div class="content">
    <div v-if="results">
      <p><b>性别：</b>{{ results.sex }}</p>
      <p><b>年龄：</b>{{ results.age }} 岁</p>
      <p><b>住址：</b>{{ results.address }}</p>
      <p><b>出生日期：</b>{{ results.birthDay.date }}</p>
      <p><b>农历生日：</b>{{ results.birthDay.nongCn }}</p>
      <p><b>出生周：</b>{{ results.birthDay.week }}</p>
      <p><b>星座：</b>{{ results.birthDay.zodiac }}</p>
      <p><b>生肖：</b>{{ results.birthDay.zodiac_zh }}</p>
    </div>
  </div>
  <div class="footer"><p>所有计算均在本地进行，不会保存您的任何数据</p></div>
</template>

<script setup>
import { reactive, toRefs, computed, onMounted, watch, onUpdated } from "vue";
import idCard from "../../toolsjs/idCard.js";

const data = reactive({
  chineseId: "",
  idCard: idCard,
  placeholder: "",
  obj: null,
});

const { chineseId, obj } = toRefs(data);

const results = computed(() => {
  if (data.idCard.checkIdCard(data.chineseId)) {
    return data.idCard.all(data.chineseId);
  } else {
    return "";
  }
});

// console.log(results);

onMounted(() => {
  let id = idCard.makeID();
  data.placeholder = id;
  // console.log(results.value)
});
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content {
  margin-top: 10px;
  margin-left: 5px;
  width: 100%;
  height: 200px;
  p {
    font-size: 16px;
    margin-top: 5px;
  }
}
.footer {
  font-size: 16px;
  color: skyblue;
  p {
    text-align: center;
  }
}
</style>
